"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { Home, Search, PlusCircle, Menu, X } from "lucide-react";
import { useState, useEffect } from "react";
import LanguageSwitcher from "./language-switcher";
import { useLanguage } from "@/context/language-provider";

export function Navbar() {
  const pathname = usePathname();
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  const { language } = useLanguage();
  
  // 监听滚动事件
  useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 20);
    };
    
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);
  
  const navItems = [
    { name: language === "zh" ? "首页" : "Home", href: language === "zh" ? "/" : "/?int=true", icon: Home },
    { name: language === "zh" ? "查看" : "View", href: "/viewer", icon: Search },
    { name: language === "zh" ? "提交" : "Submit", href: "/submit", icon: PlusCircle },
  ];

  return (
    <>
      <header className={`sticky top-0 z-[100] w-full transition-all duration-300 ${
        scrolled ? "bg-background/80 backdrop-blur-md shadow-sm" : "bg-background/50 backdrop-blur-md"
      }`}>
        <div className="w-full mx-auto px-4 h-16 flex items-center justify-between">
          <Link href="/" className="flex items-center space-x-2 relative z-10">
            <span className="text-gradient font-bold text-xl">
              {language === "zh" ? "拜托了，学长！" : "Help Me, Senior!"}
            </span>
          </Link>
          
          {/* 桌面导航 */}
          <nav className="hidden md:flex items-center space-x-2 relative z-10">
          <LanguageSwitcher className="ml-2" />
            {navItems.map((item) => {
              const isActive = pathname === item.href;
              return (
                <Link 
                  key={item.href}
                  href={item.href}
                  className={`flex items-center space-x-2 px-4 py-2 rounded-lg text-sm font-medium transition-all ${
                    isActive 
                      ? "text-primary bg-primary/10" 
                      : "text-foreground/60 hover:text-foreground/100"
                  }`}
                >
                  <item.icon className="h-4 w-4" />
                  <span>{item.name}</span>
                </Link>
              );
            })}
          </nav>
          
          {/* 移动端菜单按钮 */}
          <div className="md:hidden flex items-center gap-2">
            <LanguageSwitcher />
            <button 
              className="flex items-center justify-center h-10 w-10 rounded-full text-primary bg-primary/10 relative z-10"
              onClick={() => setIsMenuOpen(!isMenuOpen)}
              aria-label={language === "zh" ? "打开菜单" : "Open Menu"}
            >
              {isMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
            </button>
          </div>
        </div>
      </header>
      
      {/* 移动端侧边菜单 */}
      <div className={`fixed inset-0 z-[200] md:hidden transition-all duration-300 ${
        isMenuOpen ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"
      }`}>
        <div 
          className="absolute inset-0 bg-background/80 backdrop-blur-sm"
          onClick={() => setIsMenuOpen(false)}
        />
        <div 
          className={`absolute right-0 top-0 h-full w-3/4 max-w-xs shadow-xl bg-card transition-transform duration-300 ${
            isMenuOpen ? "translate-x-0" : "translate-x-full"
          }`}
        >
          <div className="p-4 space-y-6">
            <div className="flex justify-between items-center">
              <span className="text-gradient font-bold text-xl">
                {language === "zh" ? "拜托了，学长！" : "Help Me, Senior!"}
              </span>
              <button 
                className="flex items-center justify-center h-10 w-10 rounded-full text-primary bg-primary/10"
                onClick={() => setIsMenuOpen(false)}
                aria-label={language === "zh" ? "关闭菜单" : "Close Menu"}
              >
                <X className="h-5 w-5" />
              </button>
            </div>
            
            <nav className="flex flex-col space-y-3">
              {navItems.map((item) => {
                const isActive = pathname === item.href;
                return (
                  <Link 
                    key={item.href}
                    href={item.href}
                    className={`flex items-center space-x-3 px-4 py-3 rounded-lg text-base font-medium ${
                      isActive 
                        ? "text-primary bg-primary/10" 
                        : "text-foreground/60 hover:text-foreground/100"
                    }`}
                    onClick={() => setIsMenuOpen(false)}
                  >
                    <item.icon className="h-5 w-5" />
                    <span>{item.name}</span>
                  </Link>
                );
              })}
            </nav>
          </div>
        </div>
      </div>
    </>
  );
} 